<template>
  <div class="container">
    <div class="detail">
      <div class="liubai"></div>
      <div class="detail-header">
        <span class="back" @click="back"></span>
        <span class="header">商品详情</span>
      </div>
      <div class="wraps" ref="detail">
        <div class="wrap">
          <div class="cast">
            <swiper :options="swiperOption" ref="mySwiper">
              <div class="swiper-slide" v-for="(val, slide) in swiperSlides" :key="slide">
                <img :src="val.img" alt="">
              </div>
              <!--<div class="swiper-pagination" slot="pagination"></div>-->
            </swiper>
          </div>
          <div class="top">
            <div class="top-left">
              <span class="num">￥<span class="font">79.6</span></span>
              <span class="peoples"><span class="people">2</span>人拼</span>
              <span class="goods">￥99.00</span>
            </div>
            <div class="top-right">
              <span>已拼2137件</span>
            </div>
          </div>
          <div class="referral">
            <div class="product">
              <div class="product-top">
                <div class="product-font">
                  <span>自营</span>
                  <span>自营</span>
                  <span class="big">美的 （Midea）电热水MK-SH15Colour102.1</span>
                </div>
              </div>
              <div class="product-center">
                <span>壶身整体</span>
                <span>食品接触用</span>
              </div>
              <div class="product-sole">
                <span class="sole-font">服务</span>
                <img class="user" src="./icons/ok.png" alt="">
                <span>商品包邮</span>
                <img class="user" src="./icons/ok.png" alt="">
                <span>7天无理由退换</span>
              </div>
            </div>
            <div class="views">
              <div class="view">
                <img src="./icons/ok.png" alt="">
                <p>关注</p>
              </div>
              <div class="view">
                <img src="./icons/ok.png" alt="">
                <p>关注</p>
              </div>
            </div>
          </div>
          <div class="customer">
            <p class="customer-top">直接参与可快速成团</p>
            <div class="customer-sole">
              <div class="customer-left">
                <span class="circle"></span>
                <span>185****4027</span>
              </div>
              <div class="customer-right">
                <div class="mores">
                  <p class="mores-top">还差<span class="res">1人</span>成团</p>
                  <p class="mores-sole">结束 15: 29:50.<span class="res">1</span></p>
                </div>
                <span class="more">立即成团</span>
              </div>
            </div>
            <div class="customer-sole">
              <div class="customer-left">
                <span class="circle"></span>
                <span>185****4027</span>
              </div>
              <div class="customer-right">
                <div class="mores">
                  <p class="mores-top">还差<span class="res">1人</span>成团</p>
                  <p class="mores-sole">结束 15: 29:50.<span class="res">1</span></p>
                </div>
                <span class="more">立即成团</span>
              </div>
            </div>
          </div>
          <div class="opt">
            <div class="open">
              <span class="opt-font">选择</span>
              <div class="open-left">
                <span>1.5L经典珍珠白 1件</span>
              </div>
            </div>
            <span class="opt-right"></span>
          </div>
          <div class="opt">
            <div class="open">
              <span class="opt-font">选择</span>
              <div class="open-left">
                <p>湖北省 武汉市 江岸区</p>
                <p>11:00前成团，预计今天（6月10日）送达</p>
              </div>
            </div>
            <span class="opt-right"></span>
          </div>
          <div class="comment">
            <div class="comment-top">
              <span>拼友们说（1198条）</span>
              <div class="comment-right">
                <img src="./icons/zan.png" alt="">
                <span class="comment-font">好评率 99%</span>
                <span class="comment-click"></span>
              </div>
            </div>
            <div class="comment-center">
              <span>烧水快(53)</span>
              <span>产品美观（49）</span>
              <span>物美价廉（46）</span>
            </div>
            <div class="comment-sole">
              <swiper :options="swiperOption" ref="mySwiper">
                <div class="swiper-slide">
                  <div class="slide-top">
                    <p>159*****82</p>
                    <img src="./icons/ok.png" alt="">
                    <img src="./icons/ok.png" alt="">
                    <img src="./icons/ok.png" alt="">
                    <img src="./icons/ok.png" alt="">
                    <img src="./icons/ok.png" alt="">
                    <p class="slide-font">一直用美的电水壶烧开水安全方便</p>
                  </div>
                </div>
              </swiper>
            </div>
          </div>
          <div class="shop">
            <div class="shop-top">
              <span>热销排行</span>
              <span>猜你喜欢</span>
              <span class="shop-line"></span>
            </div>
            <div class="shop-sole">
              <div class="shopping" v-for="(val, key) in shop" :key="key">
                <img :src="val.img" alt="">
                <!--<p>苏泊尔(SUPOR)SW-17S12A 电水壶其</p>-->
                <p>{{val.title}}</p>
                <p class="shopping-color">￥{{val.num}}</p>
              </div>
            </div>
          </div>
          <div class="opt">
            <div class="open">
              <span class="opt-font">拼团规则</span>
              <div class="open-left">
                <span>开团或参团一人满发货一人不满退款</span>
              </div>
            </div>
            <span class="opt-right"></span>
          </div>
          <div class="adware">
            <swiper :options="swiperOption" ref="mySwiper">
              <!--<swiper-slide v-for="(val, slide) in swiperSlides" :key="slide">&lt;!&ndash;<div>{{val}}</div>&ndash;&gt;{{val}}</swiper-slide>-->
              <div class="swiper-slide" v-for="(val, list) in swiperSlides" :key="list">
                <img :src="val.img" alt="">
              </div>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div class="details">
            <div class="details-top">
              <img src="./icons/pic.png" alt="">
              <span>图文详情</span>
            </div>
            <div class="details-center"></div>
            <div class="details-sole">
              <div class="table" v-for="(val, key) in table" :key="key">
                <div class="table-left">
                  <p>{{val.youth}}</p>
                  <p>{{val.shop}}</p>
                  <p>￥<span>{{val.num}}</span></p>
                  <p>{{val.title}}</p>
                </div>
                <img :src="val.img" alt="" class="table-right">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-sole">
        <img @click="detail" src="./icons/home.png" alt="">
        <img src="./icons/cart.png" alt="">
        <div class="buy">
          <div class="alone">
            <p>￥99.00</p>
            <p>单独购买</p>
          </div>
          <div class="pioneering">
            <p>￥99.00</p>
            <p>单独购买</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'detail',
  data () {
    return {
      swiperOption: {
        autoplay: {
          delay: 3000,
          // 用户操作之后是否禁止
          disableOnInteraction: false
        },
        loop: true,
        preventLinksPropagation: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      swiperSlides: [
        {img: require('../../components/pages/image/banner/0656d00fcccc4a618eee1f4811fddc7b_th.jpg')},
        {img: require('../../components/pages/image/banner/0656d00fcccc4a618eee1f4811fddc7b_th.jpg')},
        {img: require('../../components/pages/image/banner/8e54925342144841a82058a7d825c07a.jpg')},
        {img: require('../../components/pages/image/banner/64f433861ebe4e3b917b25c84d3b7953.jpg')},
        {img: require('../../components/pages/image/banner/3ea58547dfe54657bac3e079ee86fae2.jpg')}
      ],
      shop: [
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125},
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125},
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125},
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125},
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125},
        {img: require('./icons/ok.png'), title: '苏泊尔(SUPOR)SW-17S12A 电水壶其', num: 125}
      ],
      table: [
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')},
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')},
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')},
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')},
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')},
        {youth: '青春配色', shop: '圆灶釜双胆', num: 499, title: '立即加购', img: require('./icons/ok.png')}
      ]
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    back () {
      this.$router.push({path: '/home'})
    },
    detail () {
      this.$router.push({path: '/home'})
    },
    opt () {
      this.$router.push({path: '/site'})
    }
  },
  mounted () {
    let pointer = this.swiper.pagination.bullets
    for (let i = 0; i < pointer.length; i++) {
      pointer[i].style.width = '10px'
      pointer[i].style.height = '4px'
      pointer[i].style.background = '#fff'
    }
    this.$nextTick(() => {
      let detail = this.$refs.detail
      let scroll = new BScroll(detail, {
        click: true,
        scrollY: true,
        bounce: false
      })
      return scroll
    })
  }
}
</script>

<style scoped lang="scss">
  .container{
    .detail{
      position: relative;
      .liubai{
        height: 60px;
        background: #fff;
      }
      .detail-header{
        height: 145px;
        background: #fff;
        display: flex;
        justify-content: center;
        position: relative;
        border-bottom: solid 4px #dcdcdc;
        .back{
          width: 45px;
          height: 45px;
          border: solid 1px;
          position: absolute;
          left: 60px;
          top: 5px;
          transform: rotate(45deg);
          border-top: none;
          border-right: none;
        }
        .header{
          font-size: 50px;
        }
      }
      .wraps{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        .wrap{
          height: 310vh;
          .cast{
            height: 1240px;
            .swiper-wrapper{
              width: 1240px;
              .swiper-slide{
                width: 100vw;
                height: 1240px;
                img{
                  width: 100vw;
                  height: 1240px;
                }
              }
            }
          }
          .top{
            background: url("./icons/154803967516466376.png");
            height: 195px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            position: relative;
            .top-left{
              width: 360px;
              height: 150px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              position: absolute;
              left: 40px;
              top: 10px;
              .num{
                font-size: 48px;
                color: #fff;
                .font{
                  font-size: 60px;
                }
              }
              .peoples{
                width: 145px;
                height: 55px;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                border: solid 1px #fff;
                font-size: 25px;
                margin-left: 20px;
                border-radius: 15px;
                color: #fff;
                .people{
                  width: 55px;
                  height: 55px;
                  background: #fff;
                  text-align: center;
                  border-bottom-left-radius: 12px;
                  border-top-left-radius: 12px;
                  color: #eb4f3f;
                }
              }
              .goods{
                font-size: 30px;
                color: #f6c4b3;
                text-decoration: line-through;
              }
            }
            .top-right{
              width: 230px;
              height: 70px;
              span{
                font-size: 35px;
                color: #fff;
              }
            }
          }
          .referral{
            height: 420px;
            background: #fff;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 32px;
            .product{
              height: 320px;
              width: 895px;
              padding: 40px 0 0 40px;
              box-sizing: border-box;
              .product-top{
                height: 120px;
                display: flex;
                justify-items: flex-start;
                flex-wrap: wrap;
                .product-font {
                  font-size: 30px;
                  color: #fff;
                  span:nth-child(1), span:nth-child(2){
                    padding: 0 10px;
                    background: #ec672b;
                    border-radius: 10px;
                  }
                  .big{
                    font-size: 40px;
                    color: #000;
                  }
                }
              }
              .product-center, .product-sole{
                span{
                  font-size: 35px;
                }
              }
              .product-sole{
                line-height: 110px;
                .sole-font{
                  font-size: 42px;
                  color: #999999;
                }
                .user{
                  width: 32px;
                  height: 32px;
                }
              }
            }
            .views{
              width: 260px;
              height: 260px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .view{
                img{
                  width: 60px;
                  height: 60px;
                  margin-left: 5px;
                }
                p{
                  font-size: 30px;
                }
              }
            }
          }
          .customer{
            height: 545px;
            background: #fff;
            margin-bottom: 30px;
            .customer-top{
              line-height: 145px;
              font-size: 45px;
              border-bottom: solid 1px #dcdcdc;
              text-indent: 20px;
              margin-left: 45px;
            }
            .customer-sole{
              display: flex;
              height: 200px;
              justify-content: space-around;
              align-items: center;
              .customer-left{
                width: 420px;
                display: flex;
                font-size: 35px;
                align-items: center;
                justify-content: space-around;
                .circle{
                  width: 120px;
                  height: 120px;
                  border: solid 1px #d1d1d1;
                  border-radius: 50%;
                }
              }
              .customer-right{
                width: 585px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .mores{
                  font-size: 35px;
                  .res{
                    color: #eb4f3f;
                  }
                  .mores-top{
                    text-align: right;
                  }
                }
                .more{
                  width: 225px;
                  height: 105px;
                  font-size: 40px;
                  color: #fff;
                  background: #eb4643;
                  line-height: 105px;
                  text-align: center;
                  border-radius: 10px;
                }
              }
            }
          }
          .opt{
            height: 165px;
            background: #fff;
            font-size: 40px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .opt-font{
              color: #999;
              font-size: 42px;
            }
            .open{
              height: 165px;
              display: flex;
              padding: 40px 0 0 80px;
              box-sizing: border-box;
              .open-left{
                margin-left: 40px;
              }
            }
            .opt-right{
              width: 45px;
              height: 45px;
              border: solid 1px #d1d1d1;
              transform: rotate(45deg);
              border-bottom: none;
              border-left: none;
              margin-right: 100px;
            }
          }
          .comment{
            height: 760px;
            background: #fff;
            padding-left: 50px;
            box-sizing: border-box;
            margin-bottom: 30px;
            .comment-top{
              font-size: 45px;
              line-height: 145px;
              display: flex;
              justify-content: space-between;
              border-bottom: solid 1px #dcdcdc;
              text-indent: 30px;
              .comment-right{
                padding-right: 100px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                img{
                  width: 45px;
                  height: 45px;
                  margin-right: 15px;
                  margin-top: -10px;
                }
                .comment-font{
                  color: #eb4f3f;
                }
                .comment-click{
                  width: 45px;
                  height: 45px;
                  border: solid 1px #d1d1d1;
                  transform: rotate(45deg);
                  border-bottom: none;
                  border-left: none;
                }
              }
            }
            .comment-center{
              line-height: 100px;
              font-size: 38px;
              margin: 32px 0;
              span{
                padding: 30px 40px 35px 32px;
                background: #fbedea;
                border-radius: 15px;
                text-align: center;
              }
            }
            .comment-sole{
              height: 395px;
              .slide-top{
                font-size: 40px;
                margin: 45px 0 0 30px;
                img{
                  width: 36px;
                  height: 36px;
                  margin: 10px 0 65px 0;
                }
                .slide-font{
                  font-size: 40px;
                }
              }
            }
          }
          .shop{
            height: 1330px;
            background: #fff;
            margin-bottom: 30px;
            .shop-top{
              line-height: 140px;
              font-size: 45px;
              display: flex;
              position: relative;
              span{
                width: 50%;
                text-align: center;
              }
              .shop-line{
                width: 1px;
                height: 50px;
                border-right: solid 1px;
                position: absolute;
                top: 50px;
                left: 50%;
              }
            }
            .shop-sole{
              height: 1190px;
              display: flex;
              flex-wrap: wrap;
              padding-left: 40px;
              box-sizing: border-box;
              .shopping{
                width: 33%;
                height: 595px;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                img{
                  width: 340px;
                  height: 340px;
                  margin-left: 20px;
                }
                p{
                  overflow: hidden;
                  font-size: 40px;
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  -webkit-box-orient: vertical;
                  margin-left: 10px;
                }
                .shopping-color{
                  color: #eb5a4b;
                }
              }
            }
          }
          .adware{
            height: 330px;
            .swiper-wrapper{
              width: 1240px;
              .swiper-slide{
                width: 100vw;
                height: 330px;
                position: relative;
                img{
                  width: 100vw;
                  height: 330px;
                }
              }
            }
          }
          .details{
            height: 840px;
            .details-top{
              display: flex;
              align-items: center;
              margin-left: 50px;
              line-height: 120px;
              img{
                width: 50px;
                height: 50px;
                margin-right: 20px;
              }
              span{
                font-size: 40px;
              }
            }
            .details-center{
              height: 248px;
              border: solid 1px;
              box-sizing: border-box;
            }
            .details-sole{
              height: 560px;
              display: flex;
              flex-wrap: wrap;
              background: #d8cbbf;
              .table{
                width: 395px;
                height: 240px;
                box-sizing: border-box;
                margin: 12px 0 0 12px;
                border-radius: 20px;
                background: #fff;
                display: flex;
                .table-left{
                  margin: 10px 0 0 10px;
                  width: 220px;
                  /*height: 230px;*/
                  p:nth-child(1){
                    font-size: 35px;
                    color: #d73d50;
                  }
                  p:nth-child(2){
                    font-size: 20px;
                    color: #a3a3a3;
                  }
                  p:nth-child(3){
                    font-size: 25px;
                    color: #d73d50;
                    margin-top: 12px;
                    span{
                      font-size: 45px;
                      text-decoration: line-through;
                    }
                  }
                  p:nth-child(4){
                    width: 80%;
                    height: 40px;
                    line-height: 40px;
                    font-size: 12px;
                    background: #f1a33a;
                    color: #fff;
                    text-align: center;
                    border-radius: 10px;
                  }
                }
                .table-right{
                  width: 202px;
                  height: 222px;
                }
              }
            }
          }
        }
      }
      .detail-sole{
         width: 100vw;
         height: 170px;
         background: #fff;
         position: fixed;
         bottom: 0;
         display: flex;
         align-items: center;
         justify-content: space-around;
         z-index: 999;
         img{
           width: 65px;
           height: 65px;
         }
         .buy{
           width: 915px;
           display: flex;
           align-items: center;
           .alone, .pioneering{
             line-height: 70px;
             text-align: center;
             font-size: 36px;
             color: #fff;
           }
           .alone{
             width: 395px;
             background: #f2aeb1;
             border-top-left-radius: 40px;
             border-bottom-left-radius: 40px;
           }
           .pioneering{
             width: 520px;
             background: #ec6442;
             border-top-right-radius: 40px;
             border-bottom-right-radius: 40px;
           }
         }
       }
    }
    }
</style>
